// import { Alert } from 'antd';
// import Marquee from 'react-fast-marquee';
import './style.css';
// import alertIcon from '../../assets/alertIcon.svg';
import { useState,useEffect } from 'react';
import {getNotificationInfo} from "../../api";

const AlertComponet = () => {
    const [notificationInfo, setNotification] = useState({});
    const [num, setNum]=useState(0);
    const getData = () => {
        getNotificationInfo().then((res)=>{
            setNotification(res.data.notification)
        })
    }
//     setTimeout( () => {
// num++;
// setstep(num);
// console.Tog(step)
// ,  1000);

    useEffect(() => {
        getData();

    }, [])
    useEffect(() => {
        setTimeout(()=>{
            if(num===-360){
                setNum(0);
            }else {
                setNum(num-1);
            }

           }, 100)

    })
    return (
        <div className='alert-contain'>
            <div className="animate" style={{transform: `translateX(${num}px)`}}>{notificationInfo.content}</div>
        </div>

    );

};
export default AlertComponet;